<template>
	<view>
		<view class="header"
			:style="{'height':titleBarHeight,'padding-top':statusBarHeight,'background-color': nav.bg}">
			<text class="iconfont header-back " :style="{'border':nav.color}" v-if="nav.isdisPlayNavTitle"
				@click="popChooseWeek">
				&#xe61e;
			</text>
			<view class="header-title ">{{nav.navTitle}}</view>

		</view>
		<view :style="{'height':titleBarHeight,'padding-top':statusBarHeight}"></view>
	</view>
</template>
<script>
	export default {
		props: ["nav"],
		data() {
			return {
				chooseWeek: false,
				statusBarHeight: 0,
				titleBarHeight: 0,
			}
		},
		created() {
			var that = this;
			uni.getSystemInfo({
				success: function(res) {
					if (res.model.indexOf('iPhone') !== -1) {
						that.titleBarHeight = 44 + 'px';
					} else {
						that.titleBarHeight = 48 + 'px';
					}
					that.statusBarHeight = res.statusBarHeight + 'px'
				},

			})
		},
		methods: {
			// 弹出选择周数框
			popChooseWeek() {
				this.chooseWeek = true
				uni.$emit('choose', this.chooseWeek)
			}
		}
	}
</script>

<style>
	.header {
		display: flex;
		align-items: center;
		top: 0;
		position: fixed;
		width: 100%;
		z-index: 100;
		left: 0;
	}

	.header .header-title {
		position: absolute;
		left: 50%;
		font-size: 31rpx;
		transform: translateX(-50%);
		color: #fff
	}

	.header-back {
		position: absolute;
		left: 15upx;
		font-size: 30upx;
		padding: 10upx;
		border-radius: 50%;
	}

	@font-face {
		font-family: 'iconfont';
		/* Project id 2568587 */
		src: url('//at.alicdn.com/t/font_2568587_gslu7gcw01.woff2?t=1621863393001') format('woff2'),
			url('//at.alicdn.com/t/font_2568587_gslu7gcw01.woff?t=1621863393001') format('woff'),
			url('//at.alicdn.com/t/font_2568587_gslu7gcw01.ttf?t=1621863393001') format('truetype');
	}

	.iconfont {
		font-family: "iconfont" !important;
		font-size: 25px !important;
		color: #fff !important
	}

	.weight {
		font-weight: bold;
	}
</style>
